<template>
	<view class="integral-rules">
		<view class="rules" v-if="rules.length > 0">
			<p style="text-indent:24px">“矿校云”考试学习平台将对以下操作进行积分，规则如下：</p>
			<view class="rule-item" v-for="(rule, index) in rules" :key="index">
				<view class="name">{{ rule.name }}</view>
				<view class="value">{{ rule.brief }}</view>
			</view>
		</view>
		<view class="noData" v-else>暂无规则</view>
	</view>
</template>

<script>
import { post_md5 } from '../../common/request';
export default {
	name: 'integralRules',
	data() {
		return {
			rules: []
		};
	},
	methods: {
		async loadRules() {
			let res = await post_md5('/integral-app/integral/usergrade/getGradeRule');
			this.rules = res.data;
		}
	},
	created() {
		this.loadRules();
	}
};
</script>

<style lang="less" scoped>
.integral-rules {
	width: 100vw;
	.desc {
		background: #daf0fd;
		margin: 20px;
		padding: 10px;
		border: 2px solid #05a8f4;
		border-radius: 15px;
	}

	.rules {
		padding: 20px;

		.rule-item {
			margin-top: 10px;
			border-top: 1px solid #dcf1fd;
			padding-top: 10px;

			.name {
				border-left: 3px solid #05a8f4;
				padding-left: 4px;
				font-weight: bold;
			}

			.value {
				margin-top: 5px;
				padding-left: 4px;
				color: #999;
				font-weight: normal;
				font-size: 14px;
			}
		}
	}
}

.noData {
	font-size: 35upx;
	color: #ededed;
	text-align: center;
	line-height: 500upx;
}
</style>
